<template>
	<view class="container">
		<view class="servce" @click="handlerService" v-if="servceFlag">
		  <view class="servce-img">
			  <image src="../../static/service.png" mode="aspectFill"></image>
		  </view>
		 <view class="servce-icon" @click.stop="servceFlag = false">
			  <image src="../../static/close.png" mode="aspectFill"></image>
		 </view>
		</view>
		<view class="container-carousel">
			<IndexSwiper :dataList="swiperList" />
		</view>
		<view class="container-carousel" style="margin-top: 24rpx;" @click="jumt">
			<image src="http://picture.gptkong.com/20240510/110852dd9505cf4eebbe22f9373ed570da.png" mode="aspectFill">
			</image>
		</view>
		<view class="container-aside">
			<view class="container-aside-title">优惠项目</view>
			<view class="container-aside-text">设备信息 {{ device_id || '(请微信扫码获取)' }}</view>
		</view>

		<view class="container-card" v-for="(item, index) of goodsList" :key="index" @click="openShow(item)">
			<view class="container-card-left">
				<image src="http://picture.gptkong.com/20240510/14092dff6b096f4bccb2454d292ef62f9a.png"
					mode="aspectFill"></image>
			</view>
			<view class="container-card-right">
				<view class="container-card-right-title"> {{ item.introduction }} </view>
				<view class="container-card-right-desc">{{ item.goods_name }}</view>
				<view class="container-card-right-tag">
					<view class="container-card-right-tag-box">热销卡项</view>
					<view class="container-card-right-tag-text">消耗1次</view>
				</view>
			</view>
		</view>
		<u-popup :show="showPopup" @close="showPopup = false" @open="open" closeable>
			<view class="popup-title">
				付款确认
			</view>
			<view class="popup-cell">
				<view class="popup-cell-left">价格</view>
				<view class="popup-cell-left">{{ cardObj.price }}</view>
			</view>
			<view class="popup-cell">
				<view class="popup-cell-left">付款方式</view>
				<view class="popup-cell-left">微信支付</view>
			</view>
			<view class="popup-cell">
				<view class="popup-cell-left">康烯(会员卡)剩余次数</view>
				<view class="popup-cell-left">{{userInfo.number_times ? userInfo.number_times : '0'}}次</view>
			</view>
			<view class="popup-protocol">
				<u-checkbox-group v-model="checkedVal" >
					<u-checkbox  activeColor="red" label="已仔细阅读并自愿接受全部告知事项" 
					labelSize="28" shape="circle" size="52" iconSize="42" labelColor="#F14A4A" name="1" ></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="popup-btn" @click="startPower"> 立即开机 </view>
		</u-popup>
		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>

<script>
	import request from "../../api/request";
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		components: {
			IndexSwiper,
			Tabbar
		},
		data() {
			return {
				swiperList: [],
				goodsList: [],
				showPopup: false,
				checkedVal: ['1'],
				token: null,
				device_id: '',
				userInfo: null,
				q: null,
				currentGoodsId: null,
				cardObj: null,
				servceFlag: true
			}
		},
		onLoad(query) {
			this.q = decodeURIComponent(query.q);
			console.log("query:",query);
			console.log("q:",this.q);
			//this.q = 'http://kx.taipingkeji.com/kx/index/jumpUrl/device_id/869734050395866'
			if(this.q){
				this.getDeviceIdFromScanCode();
			}
			this.getSwiperData()
			this.getLoginCode()
		},
		onShow() {
			this.getPackage()
			this.getTokenAndDeviceId()
		},
		methods: {
		
			startPower() {
				const that = this
				if (!this.token) {
				  uni.showToast({
				        title: '请先登录',
				        icon: 'none',
				        duration: 1000
				      });
				      setTimeout(() => {
				        uni.redirectTo({
				          url: '../login/login'
				        });
				      }, 1000);
				      return;
				}
				if(this.checkedVal[0] !== '1'){
				   	uni.showToast({
				   	      title: '请先勾选已知晓协议',
				   	      icon: 'none',
				   	      duration: 1000
				   	 });
				   	return;
				}
				if (!this.device_id) {
				   uni.showToast({
				         title: '请先扫码获取设备信息',
				         icon: 'none',
				         duration: 1000
				    });
					return;
				}
				uni.showLoading({
					title:"开机中..."
				}),
			    request({
			        url: '/kx/index/power',
			        data: { 
			            token:that.token,
			            device_id: that.device_id
			        },
					successCb: (res) => {
						uni.hideLoading();
						that.isShow =  false
						 uni.$u.toast('开机成功')  
					    that.getUserInfo()
					
					},
					failCb: (err) => {
					  uni.$u.toast('未知错误请联系客服')    
					}
			    });
				setTimeout(() => {
				  uni.hideLoading();
				}, 5000);
			},
			handlerService(){
				 uni.$u.toast('开发中,敬请期待..') 
			},
			getDeviceIdFromScanCode(){
				const parts = this.q.split('/');
				let device_id;
							
				for (let i = 0; i < parts.length; i++) {
				  if (parts[i] === 'device_id') {
					let device_id = parts[i + 1];
					uni.setStorageSync('device_id', device_id); // 将设备 ID 存储到本地缓存中
					this.device_id = device_id
					break; // 找到设备 ID 后跳出循环
				  }
				}	
			},
			openShow(val){
			  this.showPopup = true
			  this.currentGoodsId = val.goodsId
			  this.cardObj = val
			},
			getTokenAndDeviceId(){
				 this.token = uni.getStorageSync('token') || '';
				 this.device_id = uni.getStorageSync('device_id') || '';
				 const temp = uni.getStorageSync('userInfo') || '{}'
				 this.userInfo = JSON.parse(temp);
			},
			open(){},
			jumt() {
				uni.navigateTo({
					url: '/pages/member/member'
				})
			},
			getPackage() {
				request({
					url: '/kx/index/getPackage',
					successCb: (res) => {
						this.goodsList = res.data || [];
					},
				});
			},
			getSwiperData() {
				request({
					url: '/kx/index/getBanner',
					// data: { id: 1 },
					successCb: (res) => {
						this.swiperList = res.data || [];
					},
				});
			},
			getLoginCode(){
				uni.login({
				  provider: 'weixin', //使用微信登录
				  success: function (loginRes) {
					request({
					url: '/kx/index/getOpenid',
					data: { code: loginRes.code },
						successCb: (res) => {
							console.log('数据结果：',res);
							uni.setStorageSync('openid', res.data);
						},
					});
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.servce {
	  position: absolute;
	  top: 50%;
	  right: 50rpx;
	  transform: translateY(-50%);
	  &-icon {
		position: absolute;
		top: 0;
		right: -20rpx;
		width: 28rpx;
		height: 28rpx;
		image {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		}
	  }
	  &-img {
		width: 108rpx;
		height: 108rpx;
		image {
		 width: 100%;
		 height: 100%;
		 object-fit: cover;
		}
	  }
	}
	.container {
		padding-top: 38rpx;
		height: 100vh;
		background: #F3F3F3;

		&-carousel {
			width: 690rpx;
			height: 200rpx;
			margin: 0 auto;
			border-radius: 25rpx;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&-aside {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx 0 30rpx;

			&-title {
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			&-text {
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

		&-card {
			width: 690rpx;
			height: 168rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 24rpx auto;
			display: flex;
			align-items: center;

			&-left {
				width: 108rpx;
				height: 108rpx;
				margin-left: 30rpx;
				margin-right: 22rpx;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			&-right {
				&-title {
					font-weight: 500;
					font-size: 24rpx;
					color: #3D3D3D;
				}

				&-desc {
					font-size: 20rpx;
					color: #3D3D3D;
					line-height: 2;
				}

				&-tag {
					display: flex;
					align-items: center;
					line-height: 2;

					&-box {
						width: 124rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #F14A4A 0%, #EA8282 100%);
						color: #fff;
						font-weight: 500;
						font-size: 20rpx;
						text-align: center;
						line-height: 36rpx;
						border-radius: 10rpx;
					}

					&-text {
						font-size: 20rpx;
						color: #BFBFBF;
						margin-left: 12rpx;
					}
				}
			}
		}
	}
	
	.popup-title {
	  padding: 24rpx;
	  color: #3d3d3d;
	  font-weight: bold;
	  font-size: 30rpx;
	}
	.popup-cell {
	  display: flex;
	  justify-content: space-between;
	  padding: 12rpx 24rpx;
	  color: #3D3D3D;
	  font-size: 28rpx;
	}
	.popup-protocol {
	 margin: 12rpx 24rpx;
	}
	.popup-btn {
	  width: 380rpx;
	  height: 70rpx;
	  background: #F14A4A;
	  line-height: 70rpx;
	  text-align: center;
	  color: #fff;
	  border-radius: 50rpx;
	  margin: 24rpx auto;
	}
</style>